Lab 3: United Arab Emirates Guide




When comparing creating a responsive web page using raw HTML/CSS in contrast to implementing the Bootstrap framework, it was much easier to create a more fluid design using the latter. Bootstrap’s built in classes allowed for a much simpler implementation for different views, only having to use certain class names, whilst I ran into some difficulty with raw HTML/CSS, particularly with choosing key breakpoints and having to change the grid layout, something Bootstrap did on its own. In addition, I personally like to add margins on my website, where content would fit in 60% of the available screen size, though I would face issues when viewing them on mobile devices. Using the container class that was built in to Bootstrap, it offered a fluid version of what I was going for in previous labs, as well and removing the margin cut when it got excessive for smaller devices.


Whilst Bootstrap certainly did help with build in fluid design, there was still some quirks and difficulties when recreating the website from the HTML/CSS version. In the raw CSS edition, I implemented different three different grid layouts, directed towards phone, tablet, and laptop/pc screens. Though, when translating to Bootstrap, I had difficulty having 3 different views, with Bootstrap’s ‘col’ classes only offering two (the main one for larger screens and the stacked view for smaller ones). That being said, there are likely ways to implement these views, and my unfamiliarity to the framework likely played a major factor to me struggling. In addition, using the container class had ruined some styling, forcing me to change some of the styling externally.


Overall, Bootstrap gave a more intuitive, simple way to implement responsive design layouts to my webpage. Whilst there were some issues when translating and recreating the webpage using Bootstrap, what it does offer is a method I enjoy more than hard coding views in CSS.